<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body {
	text-align: center;
	background-color: #E4E7F1;
	font-family: 'Segoe UI', Tahoma, sans-serif;
}

td {
	align: left;
}

#form_table {
	width: 250px;
	margin-left: auto;
	margin-right: auto;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Headhunter</title>
</head>
<body>
	<h1>Welcome to HEADHUNTER Inc.</h1>

	<h2>Click to send your job application</h2>

	<div id="form_table">

		<form id='graduate_form' method="post" action="MainServlet"
			onsubmit="return validateForm()">
			<TABLE>
				<col align="left">
				<col align="left">
				<tr>
					<td align="left">Name :</td>
					<td><input type="text" name="name"></td>
				</tr>
				<tr>
					<td align="left">Age :</td>
					<td><input type="text" name="age"></td>
				</tr>
				<tr>
					<td align="left">Gender :</td>
					<td><input type="radio" name="gender" value="male">Male
						<input type="radio" name="gender" value="female">Female</td>
				</tr>
				<tr>
					<td align="left">Degree :</td>
					<!-- 					<td><input type="text" name="degree"></td> -->
					<td><SELECT style="width: 150px" NAME="degree" SIZE="5"
						MULTIPLE>
							<OPTION value="CS">CS</OPTION>
							<OPTION value="EE">EE</OPTION>
							<OPTION value="Math">Math</OPTION>
							<OPTION value="IE">IE</OPTION>
							<OPTION value="Economics">Economics</OPTION>
							<OPTION value="Management">Management</OPTION>
					</SELECT></td>
				</tr>
				<tr>
					<td align="left">Qualification:</td>
					<!-- 					<td><input type="text" name="qualification"></td> -->
					<td><SELECT style="width: 150px" NAME="qualification" SIZE="5"
						MULTIPLE>
							<OPTION value="Java">Java</OPTION>
							<OPTION value="FPGA">FPGA</OPTION>
							<OPTION value="C++">C++</OPTION>
							<OPTION value="PLSQL">PLSQL</OPTION>
							<OPTION value="Wireless">Wireless</OPTION>
							<OPTION value="Algebra">Algebra</OPTION>
							<OPTION value="Analytic Thinking">Analytic Thinking</OPTION>
					</SELECT></td>
				</tr>
				<tr>
					<td colspan="2"><br /> <input type="submit"></td>
				</tr>
			</TABLE>
		</form>
	</div>

	<script type="text/javascript">
		function validateForm() {
			var f = document.getElementById('graduate_form');
			if (f['name'].value != "" && f['age'].value != ""
					&& (f['gender'][0].checked || f['gender'][1].checked)
					&& f['degree'].value != ""
					&& f['qualification'].value != "") {
				if (isNaN(f['age'].value)){
					alert("Age must be an integer");
					return false;
				} else {
					return true
				}
			} else {
				alert("Please fill the form completely");
				return false;
			}
		}
	</script>

</body>
</html>